<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-VUE3列表展示</title>
</head>
<body>
<div id="app">
    <h1>{{ message }}</h1>

    <!--基础演示-->
    <ul>
        <li v-for="item in books">{{item}}</li>
    </ul>
    <!--数据属性展示-->
    <ul>
        <li v-for="item in books">{{item.bookName}}</li>
    </ul>
    <!--数据属性序号展示-->
    <ul>
        <li v-for="(item,index) in books">{{index}}、{{item.bookName}}</li>
    </ul>
</div>
<script src="../js/vue.global.js" />
<script>Vue.config.productionTip = true</script>
<script>
   Vue.createApp({
      data(){
          return{
              message:`Hello ,VUE！`,
              books:[
                  {bookName:"java编程思想第四版",price:98.9,quantity:999},
                  {bookName:"C++编程思想第四版",price:129.00,quantity:432},
                  {bookName:"C#编程思想第四版",price:72.00,quantity:219},
                  {bookName:"VUE3从精通到入门",price:58.90,quantity:845},
                  {bookName:"Linux编程艺术",price:198.9,quantity:355},
              ]
          }
      }
   }).mount("#app");
</script>
</body>
</html>